<template>
    <main>
        <div class="search">
            <div>
                <div class="div_span"><span>秋季特卖节</span></div>
                <div class="div_icon"><font-awesome-icon icon="search" class="icon"/></div>
            </div>
        </div>
        <ul class="type_ul">
            <li v-for="(item,index) in list" @click="change(index,item)" :class="{current:msg==index}">
                {{item.con}}
                <span></span>
            </li>
        </ul>
        <component :is='vip' class="com" >
            <!-- :hname='headerName' -->
            <div slot="zzq">
                <img :src="headerName.a" alt="" class="img_header">
            </div>
        </component>
    </main>
</template>
<script>
    import man from './man.vue';
    import woman from './woman.vue';
    import recomend from './recomend.vue';
    export default {
        // name:'app',
        components:{
            'recomend':recomend,
            // 'woman':woman,
            // 'man':man, 
        },
        data(){
            return{
                headerName:{a:''},
                vip:'recomend',
                msg:0,
                list:[
                    {
                        con:'精选推荐',
                        v:'recomend',
                        src:'',
                    },
                    {
                        con:'女装',
                        v:'recomend',
                        src:'./src/assets/images/type/nz/159913609095310525.jpg',
                    },
                    {
                        con:'男装',
                        v:'recomend',
                        src:'./src/assets/images/type/naz/159952939647610239.jpg',
                    },
                    {
                        con:'男女内衣',
                        v:'recomend',
                        src:'./src/assets/images/type/nnni/159904272867110457.jpg',
                    },
                    {
                        con:'女鞋',
                        v:'recomend',
                        src:'./src/assets/images/type/ns/159946034855510649.jpg',
                    },
                    {
                        con:'男鞋',
                        v:'recomend',
                        src:'./src/assets/images/type/nas/159946107585710188.jpg',
                    },
                    {
                        con:'箱包皮具',
                        v:'recomend',
                        src:'./src/assets/images/type/xbpj/159946135784010709.jpg',
                    },
                    {
                        con:'手表配饰',
                        v:'recomend',
                        src:'./src/assets/images/type/ssps/159947164492510377.jpg',
                    },
                    {
                        con:'护肤彩妆',
                        v:'recomend',
                        src:'./src/assets/images/type/hfcz/159953304377910771.jpg',
                    },
                    {
                        con:'个人护理',
                        v:'recomend',
                        src:'./src/assets/images/type/grhl/159953313243010635.jpg',
                    },
                    {
                        con:'母婴',
                        v:'recomend',
                        src:'./src/assets/images/type/my/159957132808310112.jpg',
                    },
                    {
                        con:'运动户外',
                        v:'recomend',
                    },
                    {
                        con:'手机数码',
                        v:'recomend',
                    },
                    {
                        con:'家用电器',
                        v:'recomend',
                    },
                    {
                        con:'家居家纺',
                        v:'recomend',
                    },
                    {
                        con:'家具家装',
                        v:'recomend',
                    },
                    {
                        con:'生活超市',
                        v:'recomend',
                    },
                    {
                        con:'唯品国际',
                        v:'recomend',
                    },
                    {
                        con:'医药健康',
                        v:'recomend',
                    },
                    {
                        con:'图书文娱',
                        v:'recomend',
                    },
                ],
                src:[
                    {
                        con:'1'
                    },
                    {
                        con:'2'
                    },
                    {
                        con:'3'
                    },
                    {
                        con:'4'
                    },
                    {
                        con:'5'
                    },
                ]
            }
        },
        methods:{
            change(a,b){
                this.vip=b.v;
                this.msg=a;
                this.headerName.a=b.src
            }
        }
    }
</script>
<style scoped>
    .type_ul{
        position: relative;
        width: 25vw;
        height: calc(100vh - 15vw);
        overflow: auto;
        float: left;
        background-color: #f3f4f5;
    }
    .type_ul>li{
        position: relative;
        height: 12.5vw;
        line-height: 12.5vw;
        text-align: center;
        color: #585c64;
    }
    .current{
        background-color: #fff;
        color: red !important;
    }
    .current::after{
        content:'';
        display: inline-block;
        position: absolute;
        left: 0;
        background-color: #f03867;
        height: 100%;
        width: 1vw;
    }
    .type_ul>li>span{
        display: inline-block;
        position: absolute;
        height: 1px;
        width: 10vw;
        bottom: 0;
        border-bottom: 1px solid #e3e5e7;
        left: 7.5vw;
    }
    /* .current{
        background-color: #fff;
    } */
    .com{
        width:75vw;
        float: right;
    }

    .search{
        width: 100vw;
        height: 15vw;
        padding: 3vw 4vw;
        background-color: #f3f4f4;
    }
    .search>div{
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #f3f4f4;
        border-radius: 1vw;
        line-height: 9vw;
        border: 1px solid #e3e5e7;
    }
    .icon{
        color:grey;
    }
    .div_icon{
        height: 100%;
        width: 10vw;
        position: absolute;
        right: 0;
        text-align: center;
    }
    .div_span{
        height: 100%;
        padding: 0 3vw;
        position: absolute;
        left: 0;
        text-align: center;
        color: #99999f;
    }
    .img_header{
        margin: 4.5vw 4vw 0 4.5vw;
        width: 66vw;
        /* height: 100%; */
    }
</style>